<!--
 * @Author: YMJ
 * @Date: 2020-10-30 10:47:06
-->
<template>
  <div>
    <!-- 列表 -->
    <tab-list
      ref="list"
      :searchs="searchs"
      :list-hedar="listHedar"
      :params="params"
      :api-function="apiFunction"
      @init-params="initParams"
    >
      <span
        slot="topicStatus"
        slot-scope="scope"
        :style="`color:${
          scope.value.focusTopicStatus === '0' || scope.value.topicStatus === '2' ? '#F56C6C' :
          scope.value.focusTopicStatus === '1' || scope.value.topicStatus === '3' ? '#67C23A' : '#909399'
        }`"
      >
        {{
          scope.value.topicStatus === '0' ? '标题待审核' :
          scope.value.topicStatus === '1' ? '标题已通过' :
          scope.value.topicStatus === '-1' ? '标题已禁用' :
          scope.value.topicStatus === '2' ? '内容待审核' :
          scope.value.topicStatus === '3' ? '内容已通过' :
          scope.value.topicStatus === '-2' ? '内容已拒绝' : 
           scope.value.topicStatus === '-3' ? '话题已关闭' : ''
        }}
      </span>
      <template slot="operate" slot-scope="scope">
        <el-button v-if=" scope.value.topicStatus === '0' || scope.value.topicStatus === '2'" type="text" size="small" @click="opentopicAuth(scope.value.topicId)">审核</el-button>
        <el-button type="text" size="small" @click="closeTopic(scope.value.topicId)">关闭</el-button>
        <el-button type="text" size="small" @click="openEditTopic(scope.value.topicId)">管理</el-button>
        <el-button type="text" size="small" @click="topicDetail(scope.value.topicId)">话题详情</el-button>
      </template>
    </tab-list>
    <el-dialog
      title="话题审核"
      :visible.sync="toastShow"
      width="30%"
      :close-on-click-modal="false"
      @open="$refs.form && $refs.form.resetForm()"
    >
      <edit-form
        ref="form"
        :rules="rules"
        :edit-list="editList"
        :form="form"
        @on-submit="topicAuth(false, form.reason)"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="toastShow = false">取 消</el-button>
        <el-button type="primary" @click="$refs.form.ruleFrom()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="话题管理"
      :visible.sync="toastShow4"
      v-if="toastShow4"
      width="30%"
      :close-on-click-modal="false"
      @open="$refs.form4 && $refs.form4.resetForm()"

    >
      <edit-form
        ref="form4"
        :edit-list="editLists4"
        :form="form4"
        @on-submit="editTopic(form4)"
        @uploade="uploade"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="toastShow4 = false">取 消</el-button>
        <el-button type="primary" @click="$refs.form4.ruleFrom()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="话题审核" :visible.sync="toastShow3" :close-on-click-modal="false" width="30%">
      <text-list :text-list="textLists" :detail-info="detailInfo" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="topicAuth(true)">同意</el-button>
        <el-button @click="toastShow = true">拒绝</el-button>
      </span>
    </el-dialog>
    <el-dialog title="话题详情" :visible.sync="toastShow2" :close-on-click-modal="false" width="30%">
      <text-list :text-list="textLists" :detail-info="detailInfo" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="toastShow2 = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 组件
import tabList from '@/components/admin/tab-list.vue'
import editForm from '@/components/admin/edit-form.vue'
import textList from '@/components/admin/text-list.vue'
// 公共方法
import { asyncApiFun, openMessageBox } from '@/utils/utils'
// 接口
import { topicList, topicAuth, topicDetail, closeTopic, topicManage } from '@/api/operate.js'
// 页面配置
import { listHedar, searchs, editList, rules, textLists, editLists4 } from './config/topic.config.js'
export default {
  components: {
    tabList,
    editForm,
    textList
  },
  data() {
    return {
      toastShow: false,
      toastShow2: false,
      toastShow3: false,
      toastShow4: false,
      form: {},
      form4: {},
      editList,
      textLists,
      rules,
      searchs,
      params: {},
      listHedar,
      apiFunction: topicList,
      authId: '',
      detailInfo: {},
      editLists4
    }
  },
  methods: {
    closeTopic(id) {
      openMessageBox({
        content: '关闭后，该话题在用户端不可见，同时不可再次发起该话题是否同意？',
        title: '话题关闭'
      }, async boole => {
        if (boole) {
          const [res] = await asyncApiFun(closeTopic, id)
          if (res) {
            this.$refs.list.getList()
          }
        }
      })
    },
    // 管理
    async openEditTopic(id) {
      const [res] = await asyncApiFun(topicDetail, id);
       if (res) {
        this.form4 = res.data
        this.toastShow4 = true
      }
    },
    async editTopic(data) {
      console.log(data)
      const [res] =await asyncApiFun(topicManage, data);
      if (res) {
        this.toastShow4 = false
        this.$refs.list.getList();
      }
    },
   uploade(url){
    this.form4.topicPic = url
   },
    async opentopicAuth(id) {
      this.authId = id;
      const [res] = await asyncApiFun(topicDetail, id);
      if (res) {
        this.detailInfo = res.data
        this.toastShow3 = true
      }
      // openMessageBox({
      //   content: '审核同意后，该话题在用户端可见，是否同意？',
      //   title: '话题审核',
      //   confirm: '同意',
      //   cancel: '拒绝'
      // }, async boole => {
      //   if (boole) {
      //     this.topicAuth(true)
      //   } else {
      //     this.toastShow = true
      //   }
      // })
    },
    // 审核话题
    async topicAuth(operation, reason) {
      const params = {
        operation,
        id: this.authId
      }
      if (reason) params.reason = reason
      const [res] = await asyncApiFun(topicAuth, params)
      if (res) {
        this.toastShow = false;
        this.toastShow3 = false;
        this.$refs.list.getList()
      }
    },
    // 话题详情
    async topicDetail(id) {
      const [res] = await asyncApiFun(topicDetail, id)
      if (res) {
        this.detailInfo = res.data
        this.toastShow2 = true
      }
    },
    initParams(param) {
      this.params = param
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
